<!--
 * @Author: your name
 * @Date: 2021-06-03 21:17:29
 * @LastEditTime: 2021-06-07 09:03:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xd-cesium-vue\src\components\InfoPanel.vue
-->
<template>
<div class="detailPanel">
    <p class="info-title">
    {{properties.name}}
    <svg class="icon closeButton" aria-hidden="true" @click="close">
        <use xlink:href="#icon-guanbianniu"></use>
    </svg> 
    </p>
    <div class="detail">{{properties.detail}}</div>
    <p style="border-top:1px solid black;border-bottom:1px solid black;height:20px;"></p>
    <div class="photo">
        <img :src="photos[currentIndex]" style="width:auto;height:90%;">
        <span class="last" @click="getLast">    
            <svg class="icon closeButton" aria-hidden="true">
                <use xlink:href="#icon-zuoyouqiehuan1"></use>
            </svg> 
        </span>
        <span class="right" @click="getNext">    
            <svg class="icon closeButton" aria-hidden="true">
                <use xlink:href="#icon-zuoyouqiehuan"></use>
            </svg> 
        </span>
    </div>
</div>
</template>
<script>
export default{
    props:['properties'],
    computed:{
        photos:function(){
            this.currentIndex =0;
            if(this.properties.photo instanceof Array)
            {
                console.log('hello')
                return this.properties.photo
            }
            return [];
        }
    },

    data(){
        return{
            currentIndex:0,
        }
    },
    mounted(){
        
    },
    methods:{
        close(){
                this.$emit('close')
            },
            getLast(){
                if(this.currentIndex ==0){
                    return;
                }
                this.currentIndex --;               
            },
            getNext(){
                if(this.currentIndex+1>=(this.properties.photo&&this.properties.photo.length)){
                    return;
                }
                this.currentIndex ++;
            }
    }
}
</script>
<style scoped>
.detailPanel{
    width:400px;
    height:70%;
    z-index: 2;
    position:absolute;
    top:130px;
    left:0;
    background-color:rgba(0,0,0,0.5);
    color:aliceblue;
}
.detail{
    height:40%;
}
.photo{
    height: 50%;
    overflow-x:auto;
    position:relative;
}
.last{
    position:absolute;
    left:0;
    top:50%;
}
.right{
    position:absolute;
    right:0;
    top:50%;
}
</style>